<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
    <van-swipe-item v-for="(item, index) in banners" :key="index" indicator-color="red">
      <img :src="item.pic" class="bannerImg" alt="">
    </van-swipe-item>
  </van-swipe>
</template>

<script setup>
import { getbanner } from '@/network/home.js'
import { onMounted, reactive } from 'vue'

// banner 图列表
const banners = reactive([])

//TODO 初始化 banner 轮播图 ↓↓↓
const initBannerImg = async () => {
  const {data: res} = await getbanner()
  banners.push(...res.banners)
}

onMounted(()=> {
  initBannerImg()
})

</script>

<style lang="less" scoped>
.van-swipe {
  margin:0.2rem 0.2rem 0 0.2rem;
  border-radius: 0.2rem;
  height: 3rem;
}

.bannerImg {
  width: 100%;
  height: 100%;
}
</style>